<template>
    <div class="iplist" v-if="info">
        <div class="top">{{week}}</div>
        <div class="middle" @click="layerEnd">
            <Row>
                <Col span=12 v-if="info[0].SIGN_STATUS !== 3">
                    <timeArea tag="上午" v-if="info[0]" :time="info[0].PLAN_TIME"/>
                </Col>
                <Col span=10 v-if="info[1].SIGN_STATUS !== 3">
                    <timeArea tag="下午" v-if="info[1]" :time="info[1].PLAN_TIME"/>
                </Col>
            </Row>
            <div class="content" v-if="info[0]">
                <span>上午地点：</span>
                <span v-if="info[0].SIGN_STATUS !== 3">{{info[0].ADDRESS}}</span>
                <span v-if="info[0].SIGN_STATUS === 3 || info[0].SIGN_STATUS === 6">未设置</span>
            </div>
            <div class="content" v-if="info[1]">
                <span>下午地点：</span>
                <span v-if="info[1].SIGN_STATUS !== 3">{{info[1].ADDRESS}}</span>
                <span v-if="info[1].SIGN_STATUS === 3 || info[1].SIGN_STATUS === 6">未设置</span>
            </div>
            <div class="content" v-if="info[2].REMARK_CONTENT">
                <span>备注：</span>
                <span>{{info[2].REMARK_CONTENT}}</span>
            </div>
        </div>

        <div class="foot">
            <span v-if="notBegun" @click="editPlan">修改&nbsp;</span>
            <span v-if="addPlanStatus" @click="addIPlan">添加&nbsp;</span>
            <span @click="changeModal">备注</span>
        </div>
        <span class="tagtop bgcolor-end" v-if="complate"> 已结束</span>
        <span class="tagtop bgcolor-start" v-if="start"> 已开始</span>
        <span class="tagtop bgcolor-start" v-if="today"> 今&nbsp;&nbsp;&nbsp;日</span>
        <Modal
            v-model="modal"
            title="添加备注"
            @on-ok="ok">
            <Input v-model="beizhu" type="textarea" :rows="4" placeholder="最多输入60字符..." :maxlength="60"></Input>
        </Modal>
    </div>
</template>

<script>
export default {
    components: {
        timeArea: () => import('./time.vue')
    },
    data() {
        return {
            beizhu: this.info[2].REMARK_CONTENT,
            modal: false,
            isClick: false
        }
    },
    computed: {
        complate() {
            let info = this.info
            if (info[0].SIGN_STATUS === 2 && info[1].SIGN_STATUS === 2) {
                return true
            }
            if (info[0].SIGN_STATUS === 2 && info[1].SIGN_STATUS === 3) {
                return true
            }
            if (info[0].SIGN_STATUS === 3 && info[1].SIGN_STATUS === 2) {
                return true
            }
        },
        start() {
            let info = this.info
            if (info[0].SIGN_STATUS === 1 || info[1].SIGN_STATUS === 1) {
                return true
            }
        },
        notBegun() {
            let info = this.info
            if (info[0].SIGN_STATUS === 0 || info[1].SIGN_STATUS === 0) {
                return true
            }
        },
        today() {
            let info = this.info
            if (new Date(info[2].DAY).toDateString() === new Date().toDateString()) {
                return true
            }
        },
        week() {
            let info = this.info
            if (info[0].WEEK === 1) {
                return '星期一'
            }
            if (info[0].WEEK === 2) {
                return '星期二'
            }
            if (info[0].WEEK === 3) {
                return '星期三'
            }
            if (info[0].WEEK === 4) {
                return '星期四'
            }
            if (info[0].WEEK === 5) {
                return '星期五'
            }
            if (info[0].WEEK === 6) {
                return '星期六'
            }
            if (info[0].WEEK === 7) {
                return '星期日'
            }
        },
        addPlanStatus() {
            let info = this.info
            if (new Date() < new Date(this.info[2].DAY)) {
                if (info[0].SIGN_STATUS === 3 || info[1].SIGN_STATUS === 3) {
                    return true
                }
            }
            return false
        }
    },
    props: ['info', 'zc'],
    methods: {
        addIPlan() {
            if (new Date() < new Date(this.info[2].DAY)) {
                this.$router.push({
                    name: 'installationPlan',
                    params: {
                        type: 1,
                        planId: {
                            forenoon: this.info[0].PLAN_ID,
                            afternoon: this.info[1].PLAN_ID
                        },
                        day: this.info[2].DAY,
                        week: this.week,
                        zc: this.zc
                    }
                })
            } else {
                this.$Message.warning('现在不能设置该计划')
            }
        },
        editPlan() {
            this.$router.push({
                name: 'installationPlan',
                params: {
                    type: 2,
                    planId: {
                        forenoon: this.info[0].PLAN_ID,
                        afternoon: this.info[1].PLAN_ID
                    },
                    day: this.info[2].DAY,
                    week: this.week,
                    info: this.info,
                    zc: this.zc
                }
            })
        },
        layerEnd() {
            if (new Date() > new Date(this.info[2].DAY)) {
                this.$Modal.info({
                    title: '提示',
                    content: '现在不能设置今日及以前的计划。'
                })
            }
        },
        ok() {
            if (!this.isClick) {
                this.isClick = true
                this.$store.dispatch('remarkDay', {
                    'remark_content': this.beizhu,
                    'user_id': this.$store.state.userInfo.USER_ID,
                    'to_user_id': this.$store.state.userInfo.USER_ID,
                    day: this.info[2].DAY
                }).then(res => {
                    this.isClick = false
                    if (res.data.status === 0) {
                        this.info[2].REMARK_CONTENT = this.beizhu
                    } else {
                        this.$Message.error(res.data.msg)
                    }
                })
            }
        },
        changeModal() {
            this.beizhu = this.info[2].REMARK_CONTENT
            this.modal ? this.modal = false : this.modal = true
        }
    }
}
</script>

<style lang="less">
    .iplist {
        position: relative;
        margin-top: 15px;
        padding: 0 15px;
        background-color: #fff;
        border-radius: 3px;
        overflow: hidden;
        .tagtop{
            position: absolute;
            top: 10px;
            right: -20px;
            padding: 0 20px;
            display: inline-block;
            transform: rotate(45deg);
            color: #fff;
            &.bgcolor-end {
                background-color: #f7b55e;
            }
            &.bgcolor-start {
                background-color: #17c295;
            }
        }
        .top{
            padding: 10px 0;
            font-size: 14px;
            font-weight: bolder;
        }
        .middle{
            padding: 10px 0;
            border-bottom: 1px solid #f8f8f8;
            border-top: 1px solid #f8f8f8;
            .content{
                font-size: 12px;
                padding: 15px 0 0 0;
                word-wrap: break-word;
            }
        }
        .foot{
            padding: 10px 0;
            text-align: right;
            font-size: 14px;
            color: #0093dd;
        }
    }
</style>
